<template>
  <div class="bnh-forget-cont">
     <div class="bnh-forget-item border flex flex-align-center">
        <img src="@/assets/img/forget-tel.png" alt="">
        <input type="number" placeholder='请输入手机号码' v-model='phone'>
        <div class="bnh-getCode flex flex-align-center flex-pack-center" :class='{active:isGetCode}' @click='getCode'><p>{{erCodeId}}</p></div>
     </div>
     <div class="bnh-forget-item border flex flex-align-center">
        <img src="@/assets/img/forget-ercode.png" alt="">
        <input type="number" placeholder="请输入验证码" v-model='ercode'>
     </div>
     <div class="bnh-forget-item border flex flex-align-center">
        <img src="@/assets/img/forget-password.png" alt="">
        <input type="password" placeholder="请设置密码" v-model='newPasswd'>
     </div>
     <div class="bnh-login-btn flex flex-align-center flex-pack-center" @click='onPost'>
        <p>确认</p>
    </div>
  </div>
</template>

<script>
	import http from '../utils/http'
	import api from '../utils/api'
	import utils from '../utils/utils'
export default {
    created(){ //页面初始化时修改网页标题
            const type = utils.getQueryString('type');
            if(type == 1){
                window.document.title = '修改密码';
                if(utils.getSessionStorage('phone') != null){
                    this.phone = utils.getSessionStorage('phone');
                }
            }else{
                window.document.title = '找回密码';
            }
    },
    data(){
        return{
            phone:'', //手机号
            newPasswd:'', //新密码
            ercode:'', // 验证码
            erCodeId:'获取验证码', //获取验证码按钮
            isCode:true, //获取验证码按钮状态
        }
    },
    computed:{
        isGetCode:{
            get:function(){
                if(utils.isPoneAvailable(this.phone)){
                    return this.isCode;
                }else{
                    return  false;
                }
            }
        }
    },
    methods:{
        	// 获取验证码
			getCode: async function(){
				let _this = this;
                if(_this.isGetCode){
                    let params = { phone: _this.phone}
                    const res = await http.get(api.sendSms, params);
                    	if (res.data.success) {
                                   _this.$vux.toast.text('验证码已发送', 'middle');
                                    let num = 60;
                                    let timer = setInterval(function () {
                                    num--;
                                    _this.isCode = false;
                                    _this.erCodeId = `${num}s`;
                                    if (num === 0) {
                                        _this.isCode = true;
                                        _this.erCodeId = `重新获取`;
                                        clearInterval(timer);
                                    }
                                }, 1000);
							}else{
                                 this.$vux.toast.text(res.data.message, 'middle');
                            }
                }
			},
            //  提交修改密码
            onPost:async function(){
               
                if(this.phone == '' || this.newPasswd == '' || this.ercode == ''){
                      this.$vux.toast.text('相关数据不能为空', 'middle');
                }else{
                    // todo 提交相关数据
                     let params = {phone: this.phone,newPwd:this.newPasswd,verifyCode:this.ercode}
                     const res = await http.get(api.updateLoginPwd, params);
                     if (res.data.success) {
                         const type = utils.getQueryString('type');
                          _this = this;
                         if(type == 1){
                            this.$vux.toast.text('密码修改成功', 'middle');
                            setTimeout(function(){_this.$router.push({path:'/login'})},3000);
                         }else{
                            this.$vux.toast.text('密码重置成功', 'middle');
                            setTimeout(function(){_this.$router.push({path:'/login'})},3000);
                         }
					 }else{
                        this.$vux.toast.text(res.data.message, 'middle');
                      }
                }
            }
    }
}
</script>

<style scoped>
.bnh-forget-cont{padding: 0 0.24rem}
.bnh-forget-item{height: 1.2rem}
.bnh-forget-item img{width: 0.37rem;height: auto;margin-left: 0.1rem;}
.bnh-forget-item input{width: 4rem;margin-left: 0.2rem;padding-left: 0.1rem;border:none}
.bnh-getCode{height: 0.6rem;width: 1.8rem;border-radius: 15px;background: #ccc;color: #fff;text-align: center;font-size: 0.28rem;line-height: 0.6rem;margin-left: 0.2rem}
.bnh-login-btn{height: 0.95rem;width: 7rem;margin: 0 auto;border-radius: 25px;background: #ffaf3c;color: #fff;font-size: 0.32rem;margin-top: 0.66rem}
.active{background: #ffaf3c}
</style>

